<template>
    <div>
        <vue3-easy-swiper :list="list" style="width: 500px;height:300px">
            <template #swiperItem="{ item }">
                <img :src="item.url" style="width: 100%;height: 100%;" />
            </template>
        </vue3-easy-swiper>
    </div>
</template>

<script lang="ts">
import { Vue3EasySwiper } from 'vue3-easy-swiper'
import 'vue3-easy-swiper/dist/style.css'
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup() {

        const list = reactive([
            {
                url: 'http://www.gzoaktreeinv.com/wp-content/uploads/2021/12/banner1.png',
                title: '标题1'
            },
            {
                url: 'http://www.gzoaktreeinv.com/wp-content/uploads/2021/12/banner2.png',
                title: '标题2'
            },
            {
                url: 'http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/IST_24519_00013-scaled.jpg',
                title: '标题3'
            },
            {
                url: 'http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/5d6994cf9b14a53ad153c001a90f4790-scaled.jpg',
                title: '标题4'
            },
        ])
        
        return {
            list
        }
    }
})
</script>

<style scoped>

</style>